<m-notice [icon]="'flaticon-exclamation m--font-primary'">
	For more info please check the components's official demos & documentation	
	<a class="m-link" href="https://ng-bootstrap.github.io/#/components/accordion/examples" target="_blank">demos & documentation</a>
</m-notice>

<div class="row">
	<div class="col-xl-6">
		<m-material-preview [viewItem]="exampleAccordion">
			<div class="m-section">
				<h3 class="m-section__heading">Self closing</h3>
				<span class="m-section__sub">
				</span>
				<div class="m-section__content">
					<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
						<ngb-panel>
							<ng-template ngbPanelTitle>
								<span class="card-header--title">Simple</span>
							</ng-template>
							<ng-template ngbPanelContent>
								Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
							</ng-template>
						</ngb-panel>
						<ngb-panel>
							<ng-template ngbPanelTitle>
								<span class="card-header--title">&#9733;
									<b>Fancy</b> title &#9733;</span>
							</ng-template>
							<ng-template ngbPanelContent>
								Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
							</ng-template>
						</ngb-panel>
						<ngb-panel [disabled]="true">
							<ng-template ngbPanelTitle>
								<span class="card-header--title">Disabled</span>
							</ng-template>
							<ng-template ngbPanelContent>
								Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
							</ng-template>
						</ngb-panel>
					</ngb-accordion>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleOneOpenPanelAtAHome">
			<ngb-accordion [closeOthers]="true" activeIds="static-1">
				<ngb-panel id="static-1">
					<ng-template ngbPanelTitle>
						<span class="card-header--title">Simple</span>
					</ng-template>
					<ng-template ngbPanelContent>
						Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
					</ng-template>
				</ngb-panel>
				<ngb-panel id="static-2">
					<ng-template ngbPanelTitle>
						<span>&#9733;
							<b>Fancy</b> title &#9733;</span>
					</ng-template>
					<ng-template ngbPanelContent>
						Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
					</ng-template>
				</ngb-panel>
				<ngb-panel id="static-3" [disabled]="true">
					<ng-template ngbPanelTitle>
						<span class="card-header--title">Disabled</span>
					</ng-template>
					<ng-template ngbPanelContent>
						Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
					</ng-template>
				</ngb-panel>
			</ngb-accordion>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleTogglePanels">
			<ngb-accordion #acc11="ngbAccordion">
				<ngb-panel id="toggle-11">
					<ng-template ngbPanelTitle>
						<span class="card-header--title">First panel</span>
					</ng-template>
					<ng-template ngbPanelContent>
						Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
					</ng-template>
				</ngb-panel>
				<ngb-panel id="toggle-22">
					<ng-template ngbPanelTitle>
						<span class="card-header--title">Second</span>
					</ng-template>
					<ng-template ngbPanelContent>
						Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
					</ng-template>
				</ngb-panel>
			</ngb-accordion>

			<div class="m-separator m-separator--dashed"></div>

			<button class="btn btn-primary" (click)="acc11.toggle('toggle-11')">Toggle first</button>
			<button class="btn btn-info" (click)="acc11.toggle('toggle-22')">Toggle second</button>

		</m-material-preview>

	</div>

	<div class="col-xl-6">
		<m-material-preview [viewItem]="examplePreventPanelToggle">
			<ngb-accordion (panelChange)="beforeChange($event)">
				<ngb-panel id="preventchange-1">
					<ng-template ngbPanelTitle>
						<span class="card-header--title">Simple</span>
					</ng-template>
					<ng-template ngbPanelContent>
						Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
					</ng-template>
				</ngb-panel>
				<ngb-panel id="preventchange-2">
					<ng-template ngbPanelTitle>
						<span class="card-header--title">I can't be toggled...</span>
					</ng-template>
					<ng-template ngbPanelContent>
						Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
					</ng-template>
				</ngb-panel>
				<ngb-panel id="preventchange-3">
					<ng-template ngbPanelTitle>
						<span class="card-header--title">I can be opened, but not closed..."</span>
					</ng-template>
					<ng-template ngbPanelContent>
						Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
					</ng-template>
				</ngb-panel>
			</ngb-accordion>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleGlobalConfigurationOfAccordions">
			<div class="m-section">
				<span class="m-section__sub">
					This accordion uses customized default values.
				</span>
				<div class="m-section__content">
					<ngb-accordion #acc33="ngbAccordion" activeIds="config-panel-one" [closeOthers]="'true'" [type]="'info'">

						<ngb-panel id="config-panel-one">
							<ng-template ngbPanelTitle>
								<span class="card-header--title">One</span>
							</ng-template>
							<ng-template ngbPanelContent>
								Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
							</ng-template>
						</ngb-panel>
						<ngb-panel>
							<ng-template ngbPanelTitle>
								<span class="card-header--title">Two</span>
							</ng-template>
							<ng-template ngbPanelContent>
								Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
							</ng-template>
						</ngb-panel>
					</ngb-accordion>
				</div>
			</div>
		</m-material-preview>
	</div>
</div>
